<template>
  <view class="main-content">
    <fui-landscape :show="mainShow"  @close="closePopup">
        <view class="body">
            <view class="title">
                您确定将该产品添加到
            </view>

            <view class="body-info">
                <view class="info-image">
                    <image style="width: 100%;height: 100%; border-radius:10rpx;"
             :src="leaderboard.image"></image>
                </view>
                <view class="info-content">
                    <view class="content-title">
                        {{leaderboard.name}}
                    </view>
                    <view class="content-body">{{leaderboard.content}}</view>
                    <view class="content-platform">支持平台:
                        <image style="width: 25rpx;height: 25rpx; margin-left: 20rpx;"
                    src="/static/dy-logo.png"></image>    
                    </view>

                </view>
            </view>

            <view class="me-main">
                添加玩法
            </view>
            <view class="user-info">
                <fui-avatar size="small" :src="user.avatar" ></fui-avatar>
                <view class="name">
                    <view style="font-weight: bold;">{{user.nickname}}</view>
                    <view @click="addPlaying" class="add-status">
                         {{bol?"未添加":"已经添加"}} 
                    </view>
                </view>
            </view>

        </view>
    </fui-landscape>
  </view>
</template>

<script setup lang="ts">
import type{ Leaderboard } from "@/api/model/dyUserCodeModel";
import dyUserPlayingService from "@/api/dyUserPlayingService";
import type{ DyPlaying  } from "@/api/model/dyUserCodeModel";
import userStore from "@/store/user";
interface IProps {
    mainShow:boolean
    leaderboard:Leaderboard | DyPlaying
}
const props =  withDefaults(defineProps<IProps>(), {})
const bol = ref(true)
watch(() => props.mainShow, (newMainShow, oldMainShow) => {
  if(newMainShow){
    getJoinStatus()
  }
});
const emit = defineEmits(['update:mainShow'])
const user = userStore()
const closePopup = ()=>{
    emit('update:mainShow',false)
}
const getJoinStatus = async ()=>{
    const {success,result} = await dyUserPlayingService.getJoinStatus({id:props.leaderboard.id})
    if(success){
        bol.value = result
    }
}

const addPlaying =async ()=>{
    if(bol.value){
       const {success,result} = await  dyUserPlayingService.addUserPlayId({id:props.leaderboard.id.toString()})
       if(success){
        closePopup()
       }
    }
}

</script>

<style lang="scss" scoped>
.main-content{
    .body{
        width: 600rpx;
        height: 570rpx;
        background: rgb(239,238,254);
        border-radius: 20rpx;
        .title{
            text-align: center;
            margin-top: 20rpx;
            font-weight: bolder;
            color: rgb(95, 84, 163);
        }
        .body-info{
            height: 250rpx;
            background: white;
            margin: 28rpx;
            border-radius: 20rpx;
            display: flex;
            .info-image{
                height: 210rpx;
                width: 140rpx;
                margin: 20rpx;
                border-radius: 20rpx;
            }
            .content-title{
                margin: 28rpx 0;
                font-size: 28rpx;
                width: 340rpx;
            }
            .content-body{
                font-size: 20rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 340rpx;
                color: $uni-text-color-placeholder;
            }
            .content-platform{
                background: rgb(247,246,251);
                font-size: 23rpx;
                position: relative;
                top: 50rpx;
                padding: 10rpx;
                border-radius: 20rpx;
                color: $uni-text-color-placeholder;
                display: flex;
                align-items: center
            }
        }
        .me-main{
            color: rgb(95, 84, 163);
            font-weight: bolder;
            margin-left: 28rpx;
        }
        .user-info{
            display: flex;
            margin: 28rpx;
            padding: 20rpx;
            font-size: 23rpx;
            width: 200rpx;
            background-color: white;
            border-radius: 20rpx;
            .name{
                margin-left: 20rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .add-status{
                font-size: 18rpx;
                background: rgb(248,247,252);
                width: 80rpx;
                height: 30rpx;
                line-height: 30rpx;
                text-align: center;
                border-radius: 10rpx;
                margin-top: 4rpx;
                color: $uni-text-color-placeholder;
            }
        }
    }

}
</style>
